<template>
<div>
<navbar>
  <div  class="left" slot="left" @click='backclick'>
    <img src="./back.png" alt="">
  </div>
  <div slot="center" class="titles">
    <div v-for="(item,index) in titles" class="titles-item"  :class="{active:index===currentindex}" @click="detailclick(index)">{{item}}</div>

  </div>
</navbar>
</div>
</template>

<script>
import navbar from '../../../components/common/navbar/navbar.vue'
export default {
  components: { navbar },
  name:'detailnavbar',
  componnets:{
    navbar
  },
  data(){
    return{
      titles:['商品','参数','评论','推荐'],
      currentindex:0
    }
  },
  methods:{
    backclick(){
      this.$router.back()
    },
    detailclick(index){
      this.currentindex=index
    }
  }
}
</script>

<style scoped>
.titles{
  display: flex;
  font-size: 13px;
}

.titles-item{
  flex: 1;
}
.left img{
  width: 42px;
  height: 42px;
}

.active{
    color: pink;

}
</style>
